<template>
  <el-dialog v-model="dialogFormVisible" title="添加应用" @close="closeDialog">
    <el-form :model="addAppForm" ref="addAppRef" :rules="addApprules">
      <el-form-item label="应用类型" :label-width="formLabelWidth" prop="type">
        <el-select v-model="addAppForm.type" placeholder="请选择应用类型" class="el-my-select" ref="type">
          <el-option label="PC应用" :value="1"></el-option>
          <el-option label="手机应用" :value="2"></el-option>
          <!-- <el-option label="基础平台菜单" value="3"></el-option> -->
        </el-select>
      </el-form-item>
      <el-form-item label="应用分类" :label-width="formLabelWidth" prop="type">
        <el-select v-model="addAppForm.classification" placeholder="请选择应用分类" class="el-my-select" ref="type">
          <el-option label="人员" :value="1"></el-option>
          <el-option label="学生" :value="2"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="用户群体" :label-width="formLabelWidth" prop="userType">
        <el-select v-model="addAppForm.userType" placeholder="请选择用户群体" class="el-my-select" ref="userType">
          <el-option label="学生" :value="1"></el-option>
          <el-option label="人员" :value="2"></el-option>
          <el-option label="全部" :value="3"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="是否置顶" :label-width="formLabelWidth" prop="isTop">
        <el-select v-model="addAppForm.isTop" placeholder="请选择是否置顶" class="el-my-select" ref="isTop">
          <el-option label="非置顶" :value="1"></el-option>
          <el-option label="置顶" :value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="应用名称" :label-width="formLabelWidth" prop="appName">
        <el-input v-model="addAppForm.appName" autocomplete="off" ref="appName" placeholder="请填写应用名称"></el-input>
      </el-form-item>
      <el-form-item label="应用描述" :label-width="formLabelWidth" prop="remark">
        <el-input v-model="addAppForm.remark" autocomplete="off" ref="remark" placeholder="请填写应用描述"></el-input>
      </el-form-item>
      <!-- <el-form-item label="apiKey" :label-width="formLabelWidth" prop="apiKey">
        <el-input v-model="addAppForm.apiKey" autocomplete="off" ref="apiKey" placeholder="请输入apiKey"></el-input>
      </el-form-item>
      <el-form-item label="apiSecret" :label-width="formLabelWidth" prop="apiSecret">
        <el-input v-model="addAppForm.apiSecret" autocomplete="off" ref="apiSecret"
          placeholder="请输入apiSecret"></el-input>
      </el-form-item> -->
      <el-form-item label="应用网址" :label-width="formLabelWidth" prop="url">
        <el-input v-model="addAppForm.url" ref="url" autocomplete="off" placeholder="请输入应用网址"></el-input>
      </el-form-item>
      <el-form-item label="应用路由" :label-width="formLabelWidth" prop="background">
        <el-input v-model="addAppForm.background" ref="url" autocomplete="off" placeholder="请输入应用路由"></el-input>
      </el-form-item>
      <el-form-item label="应用序号" :label-width="formLabelWidth" prop="sortNum">
        <el-input v-model="addAppForm.sortNum" type="number" ref="sortNum" autocomplete="off"
          placeholder="请输入应用序号"></el-input>
      </el-form-item>
      <el-form-item label="应用图标" :label-width="formLabelWidth">
        <addImageView ref="addImage" />
      </el-form-item>
      <!-- <el-form-item label="应用图标" :label-width="formLabelWidth">
        <el-upload class="upload-demo" :limit="1" :on-remove="handleRemove" :file-list="files" list-type="picture-card"
          :on-preview="handlePreview">
          <div v-if="files.length === 0" class="upload-trigger">
            <i class="el-icon-plus"></i>
          </div>
          <div v-else class="image-preview">
            <img :src="files[0].url" class="uploaded-image" />
            <div class="delete-icon" @click="handleRemove(files[0])">删除</div>
          </div>
        </el-upload>
      </el-form-item> -->
      <el-form-item label="应用图标" :label-width="formLabelWidth">
        <el-upload :limit="1" list-type="picture-card" :on-change="handlePictureChange" :on-remove="handleRemove"
          :auto-upload="false">
          <el-icon>
            <Plus />
          </el-icon>
        </el-upload>

      </el-form-item>

    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="cancel()">取消</el-button>
        <el-button type="primary" @click="save()">保存</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import { ref } from "vue";
import addImageView from "@/components/addImage.vue";
import { httpService } from "@/utils/httpService";
import { ElMessage, ElForm } from "element-plus";
import { Plus } from '@element-plus/icons-vue'
import { vxRule } from "@/utils/validator";

export default {
  name: "AddApp",
  components: { ElForm, addImageView, ElMessage, Plus },

  data() {
    return {
      dialogFormVisible: ref(false),
      formLabelWidth: "120px",
      files: [],
      dialogImageUrl: "",
      addAppForm: {
        appName: "",
        isTop: 1,
        remark: "",
        type: "",
        apiKey: "",
        apiSecret: "",
        background: "",
        url: "",
        icon: "",
        sortNum: "100",
        userType: "",
        id: "",
        classification: "",
        url2: "",
      },
      // 校验规则
      addApprules: {
        appName: vxRule(true, null, "blur"),
        type: vxRule(true, null, "blur"),
        // apiKey: vxRule(true, null, "blur"),
        // apiSecret: vxRule(true, null, "blur"),
        icon: vxRule(true, null, "blur"),
        sortNum: vxRule(true, null, "blur"),
        userType: vxRule(true, null, "blur"),
        isTop: vxRule(true, null, "blur"),
        classification: vxRule(true, null, "blur"),
      },
    };
  },
  methods: {

    handleRemove(uploadFile, uploadFiles) {
      console.log(123, uploadFile, uploadFiles)
    },

    handlePictureChange(uploadFile) {
      console.log(312, uploadFile);
      let params = new FormData()
      params.append("file", uploadFile.raw)
      httpService(
        "/javaApi/upload/uploadFile", params, "post"
      ).then((data) => {
        this.addAppForm.url2 = data.url
      });
    },



    closeDialog() {
      this.clear();
    },
    cancel() {
      this.dialogFormVisible = false;
      this.clear();
    },
    getAppDataById(id) {
      httpService("/javaApi/appInfo/queryById", { id: id }, "get").then((data) => {
        this.addAppForm = data.object;
        this.addAppForm.type = String(this.addAppForm.type);
        let obj = new Object();
        //回显图片
        if (this.addAppForm.icon != "" && this.addAppForm.icon != null) {
          obj.url = this.addAppForm.icon;
          this.$refs.addImage.pushImage(obj);
          this.$refs.addImage.hideUpload = true;
        }
      });
    },
    clear() {
      this.dialogFormVisible = false;
      this.addAppForm.appName = "";
      this.addAppForm.userType = "";
      this.addAppForm.type = "";
      this.addAppForm.remark = "";
      this.addAppForm.isTop = "";
      this.addAppForm.apiKey = "";
      this.addAppForm.background = "";
      this.addAppForm.apiSecret = "";
      this.addAppForm.url = "";
      this.addAppForm.icon = "";
      this.addAppForm.sortNum = "";
      this.addAppForm.id = ""
      this.addAppForm.classification = ""
      this.$refs.addImage.fileList = [];
      this.$refs.addImage.clearImage();
      this.$refs.addImage.hideUpload = false;
    },
    save() {
      this.$refs.addAppRef.validate((valid) => {
        if (valid) {
          console.log("====");
          let params = new FormData(); //创建一个form对象,必须是form对象否则后端接受不到数据
          if (this.$refs.addImage.fileList.length > 0) {
            if (this.$refs.addImage.fileList[0].raw) {
              params.append("file", this.$refs.addImage.fileList[0].raw);
            }
          }
          params.append("appName", this.addAppForm.appName);
          params.append("type", this.addAppForm.type);
          params.append("apiKey", this.addAppForm.apiKey);
          params.append("isTop", this.addAppForm.isTop);
          params.append("remark", this.addAppForm.remark);
          params.append("userType", this.addAppForm.userType);
          params.append("apiSecret", this.addAppForm.apiSecret);
          params.append("url", this.addAppForm.url);
          params.append("icon", this.addAppForm.icon);
          params.append("sortNum", this.addAppForm.sortNum);
          params.append("background", this.addAppForm.background);
          params.append("classification", this.addAppForm.classification);
          params.append("url2", this.addAppForm.url2);
          params.append("isEffect", 1);
          console.log("====");
          let config = { "Content-Type": "multipart/form-data" };
          if (this.addAppForm.id) {
            params.append("id", this.addAppForm.id);
            httpService("/javaApi/appInfo/edit", params, "post", config).then((data) => {
              if (data.code == 200) {
                ElMessage.success(data.message);

                this.clear();
                //刷新父组件的数据
                this.$parent.getListApp();
              } else {
                ElMessage.error(data.message);

              }
            });
          } else {
            httpService("/javaApi/appInfo/add", params, "post", config).then((data) => {
              if (data.code == 200) {
                ElMessage.success(data.message);
                this.clear();
                //刷新父组件的数据
                this.$parent.getListApp();
              } else {
                ElMessage.error(data.message);

              }
            });
          }
        } else {
          return false;
        }
      });
    },
  },
};
</script>
<style>
.el-my-select {
  display: inline-block;
  position: relative;
  line-height: 32px;
  width: 100%;
}

.el-dialog__header {
  padding: var(--el-dialog-padding-primary);
  padding-bottom: 10px;
  border-bottom: 1px solid #dedede;
}
</style>